<template>
  <div class="login-container">
    <el-form ref="loginForm" class="login-form" :model="loginForm" :rules="rules">
      <div class="login-title">Qiuの杂货铺</div>
      <el-form-item prop="username" style="width: 65%">
        <span class="svg-container">
          <i class="el-icon-user" />
        </span>
        <el-input v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text" />
      </el-form-item>
      <el-form-item prop="password" style="width: 65%">
        <span class="svg-container">
          <i class="el-icon-lock" />
        </span>
        <el-input v-model="loginForm.password" placeholder="请输入密码" name="password" type="text" @keyup.enter.native="login('loginForm')" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="login('loginForm')">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import loginApi from '@/api/login'
export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },

      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const form = new FormData()
          form.append('username', this.loginForm.username)
          form.append('password', this.loginForm.password)

          loginApi
            .login(form)
            .then(response => {
              if (response.code === 20000) {
                var token = this.loginForm.username === 'admin' ? 'admin' : 'user'
                if (token !== '') {
                  //存储用户角色(先默认写死)
                  let getUserRole = token
                  localStorage.setItem('userRole', getUserRole)
                  // 存储 token 到 vuex 仓库中（页面刷新会清空）
                  this.$store.commit('setToken', token)
                  // 存储 token 到浏览器缓存中（清空浏览器缓存会被清理）
                  localStorage.setItem('token', token)
                  localStorage.setItem('userInfo', JSON.stringify(response.data.data))
                  // 页面跳转到首页
                  this.$router.push('/main')
                } else {
                  this.$message.error('登陆失败！')
                }
              } else {
                this.$message.error(response.message)
              }
            })
            .catch(e => {
              console.log(e)
              this.$message.error('错误')
            })
        }
      })
    }
  }
}
</script>
<style>
.login-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../../assets/bg.jpeg) no-repeat left top;
  background-size: 100% 100%;
  background-attachment: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.login-form {
  width: 400px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-title {
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
  color: rgb(31, 29, 29);
}
.login-form .el-form-item__content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.svg-container {
  margin-right: 10px;
  font-size: 30px;
  font-weight: bold;
  color: rgb(31, 29, 29);
}
</style>
